<template>
	<view class="Email flex flex-direction-column font-size-28 background-fff border-radius-20 padding-left-28">
		<view class="EmailList flex flex-1" v-for="(item,index) in props.data" :key="index"
			@touchstart="startLongPress(item.c_mdcode)" @touchend="endLongPress" @touchcancel="endLongPress"
			@click="onClickEmail(item)">
			<view class="margin-right-20 flex align-items-center" style="position: relative;justify-content: center;">
				<image :src="item.c_sender_pic" @error="setErrorImg(item)" class="border-radius-50"
					style="width: 72rpx;height: 72rpx;"></image>
				<view class="news-radius" v-if="item.c_read_status=='否' || item.c_read_status=='N'"></view>
			</view>
			<view class="EmailListBorder flex flex-direction-column border-bottom-eee padding-bottom-28 padding-top-28">
				<view class="flex justify-content-space-between align-items-center" style="position: relative;">
					<view class="font-weight-bold ellipsis-1" :style="{width:(scrollWidth - 31)+'px'}">{{item.c_title}}
					</view>
					<view class="font-size-20 color-888" style="position: absolute;right: 28rpx;">{{item.c_send_dt}}</view>
				</view>
				<view class="ellipsis-1 font-size-24 margin-top-2" :style="{width:scrollWidth+'px'}">
					<span class="color-888">来自 </span>[{{item.c_sender}}]{{item.c_sender_name}}
				</view>
				<view class="ellipsis-1 font-size-24 margin-top-2" :style="{width:scrollWidth+'px'}">
					<span
						class="color-888">接收人 </span>{{(item.c_receiver_name == "*"|| item.c_receiver_name == null || item.c_receiver_name =="")?"全体人员" : item.c_receiver_name}}
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted } from 'vue';
	import service from '@/common/service'
	import { useMainStore } from '@/store/modules/store';
	import { useLoginStore } from '@/store/modules/useLoginStore';
	const mainStore = useMainStore();
	const LoginStore = useLoginStore();
	interface Props {
		data : object,
	}
	const props = defineProps<Props>();
	const emit = defineEmits(["change"]);
	const scrollWidth = ref(uni.getSystemInfoSync().windowWidth - 80);

	const setErrorImg = e => {
		e.c_sender_pic = '/static/img/no_image.png'
	}

	/**
	 *  长按处理程序
	 */
	const longPressTimeout = 1000; // 长按时长，单位毫秒
	const isLongPressed = ref(false);
	let longPressTimer : any;

	const startLongPress = (item : string) => {
		if (longPressTimer) {
			clearTimeout(longPressTimer);
		}
		longPressTimer = setTimeout(() => {
			isLongPressed.value = true;
			longPressHandle(item);
		}, longPressTimeout);
	}

	const endLongPress = () => {
		if (longPressTimer) {
			clearTimeout(longPressTimer);
			longPressTimer = null;
			isLongPressed.value = false;
		}
	}
	// 长按事件
	const longPressHandle = (value : string) => {
		console.log('111111111')
	}
	const onClickEmail = item => {
		console.log("item: " + JSON.stringify(item));
		if (item.selType == '发件箱' && item.industryTabIndex == 0) {
			let request = {
				url: LoginStore.EnjoyMain,
				data: {
					UniqueKey: "管易通40公共",
					ObjectData: item.c_guid,
					MethodName: "DocGetContent",
				},
			}
			service.request(request, (res) => {
				if (res && res.data) {
					if (!res.data.HasException) {
						const ObjectData = res.data.ObjectData;
						const reg = /<(.*)>.*<\/\1>|<(.*) \/>/;
						//区分是否是后台数据（含html)
						if (!reg.test(unescape(ObjectData))) {
							// 进入编辑详情
							uni.navigateTo({
								url: './WriteEmail?item=' + JSON.stringify(item)
							});
						} else {
							uni.navigateTo({
								url: `./EmailDetail?id=${item.c_id}&selType=${item.selType}&industryTabIndex=${item.industryTabIndex}&c_read_status=${item.c_read_status}`
							});
						}
					} else {
						service.enjoyShowToast(res.data.Exception.Message)
					}
				}
			}, () => {
				console.log('失败')
			});
		} else {
			uni.navigateTo({
				url: `./EmailDetail?id=${item.c_id}&selType=${item.selType}&industryTabIndex=${item.industryTabIndex}&c_read_status=${item.c_read_status}`
			});
					
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/main.scss';

	.flex {
		display: flex;
	}

	.flex-1 {
		flex: 1;
	}

	.flex-direction-column {
		flex-direction: column !important;
	}

	.justify-content-space-between {
		justify-content: space-between;
	}

	.align-items-center {
		align-items: center !important;
	}

	.font-size-28 {
		font-size: 28rpx;
	}

	.font-size-24 {
		font-size: 24rpx;
	}

	.font-size-20 {
		font-size: 20rpx;
	}

	.background-fff {
		background-color: #fff;
	}

	.border-radius-20 {
		border-radius: 20rpx;
	}

	.border-radius-50 {
		border-radius: 50%;
	}

	.margin-right-20 {
		margin-right: 20rpx;
	}

	.word-wrap-break-word {
		word-wrap: break-word;
	}

	.font-weight-bold {
		font-weight: bold;
	}

	.ellipsis-1 {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.color-888 {
		color: #888;
	}

	.margin-top-2 {
		margin-top: 2rpx;
	}

	.padding-bottom-28 {
		padding-bottom: 28rpx
	}

	.padding-top-28 {
		padding-top: 28rpx
	}

	.padding-left-28 {
		padding-left: 28rpx;
	}

	.padding-left-36 {
		padding-left: 36rpx;
	}

	.padding-right-36 {
		padding-right: 36rpx;
	}

	.border-bottom-eee {
		border-bottom: solid 1px rgba(238, 238, 238, 1);
	}

	.Email .EmailList:last-child .EmailListBorder {
		border-bottom: none;
	}

	.news-radius {
		width: 8px;
		height: 8px;
		background-color: rgba(255, 64, 0, 1);
		position: absolute;
		top: 46rpx;
		right: 2px;
		border-radius: 50%;
	}
</style>